<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{common/layout}">
<head>
    <title th:text="${keyword}"></title>
    <meta name="keywords" th:content="${keyword}">
    <meta name="description" th:content="${GLOBAL.BLOG_DESCRIPTION}">
</head>
<body>
<div layout:fragment="content">
    <div class="breadcrumb breadcrumb-gal" id="search-breadcrumb">
        <i class="fa fa-home"></i>搜索'<span style="color: red;" th:text="${keyword}"></span>'的结果</div>
    <!-- 内容主体 -->
    <div id="article-list">
        <div class="article well clearfix article-body article-excerpt" data-aos="flip-up" th:each="item:${page.records}">
            <div class="data-article hidden-xs">
                <span class="month" th:text="${#dates.month(item.createTime)}+'月'"></span><span class="day" th:text="${#dates.day(item.createTime)}">09</span>
            </div>
            <!-- 大型设备文章 -->
            <section class="hidden-xs">
                <div class="title-article">
                    <h1>
                        <a th:href="@{/{url}.html(url=${item.url})}" th:title="${item.title}">
                            <span th:text="${item.title}"></span>
                        </a>
                    </h1>
                </div>
                <div class="tag-article">
                                <span class="label label-gal"><i class="fa fa-list-alt"></i>
                                    <a th:href="@{/category/{url}/(url=${item.category.url})}" th:title="${item.category.name}" th:text="${item.category.name}"></a></span>
                    <span class="label label-gal" th:each="tag:${item.tags}"><i class="fa fa-tag"></i>
                                    <a th:href="@{/tag/{url}/(url=${tag.url})}" th:title="${tag.name}" th:text="${tag.name}"></a></span>
                </div>
                <div class="alert alert-gal article-body content-article">
                    <div class="item">
                        <a th:href="@{/{url}.html(url=${item.url})}" th:title="${item.title}">
                            <div class="img">
                                <img th:src="${item.image}?:${GLOBAL.DEFAULT_IMAGE}" th:alt-title="${item.title}">
                            </div>
                            <div class="info"><p th:text="${item.description}"></p></div>
                        </a>
                    </div>
                </div>
            </section>
            <!-- 大型设备文章结束 -->
            <!-- 小型设备文章 -->
            <section class="visible-xs">
                <div class="title-article">
                    <h4>
                        <a th:href="@{/{url}.html(url=${item.url})}" th:title="${item.title}">
                            <span th:text="${item.title}"></span>
                        </a>
                    </h4>
                </div>
                <p></p>
                <div style="text-align: center;">
                    <i class="fa fa-calendar"></i>
                    [[${item.createTime}]]
                </div>
                <p></p>
                <p></p>
                <div style="text-align: center;">
                    <i class="fa fa-list-alt"></i>
                    <a style="text-decoration:none;out-line:none;color:#3d4450;" th:href="@{'/category/'${item.category.url}}" th:title="${item.category.name}" th:text="${item.category.name}"></a>
                </div>
                <p></p>
                <div class="alert alert-gal article-body content-article">
                    <p style="text-align: center;">
                        <a th:href="@{/{url}.html(url=${item.url})}" th:title="${item.title}">
                            <img th:src="${item.image}?:${GLOBAL.DEFAULT_IMAGE}" th:alt-title="${item.title}">
                        </a>
                    </p>
                </div>
                <div class="alert alert-zan" th:text="${item.description}"></div>
                <a class="btn btn-danger pull-right read-more btn-block" th:href="@{/{url}.html(url=${item.url})}" th:title="${item.title}">
                    阅读全文
                </a>
            </section>
            <!-- 小型设备文章结束 -->
        </div>
    </div>
    <!-- 内容主体结束 -->

    <!-- 分页 -->
    <div id="gal-pagination" class="clearfix" th:if="${page.total>0}">
        <ul class="pagination pagination-gal pull-right" th:with="totalPage=${page.getPages()},startPage=${(page.current >= 4)?(page.current - 4):1},endPage=${(totalPage - page.current)>4?(page.current + 4):totalPage}">
            <li th:if="${page.hasPrevious()}" class="prev"><a th:href="@{'./'+${page.current - 1}}" title="上一页">«</a></li>
            <li th:if="${page.current > 5}"><a href="./1" title="第1页">1</a></li>
            <li th:if="${page.current > 6}"><span>...</span></li>
            <th:block th:each="i:${#numbers.sequence(startPage,endPage)}">
                <li th:if="${i==page.current}" class="active disabled">
                    <span th:text="${i}"></span>
                </li>
                <li th:unless="${i==page.current}">
                    <a th:href="@{'./'+${i}}" th:title="|第${i}页|" th:text="${i}"></a>
                </li>
            </th:block>
            <li th:if="${(page.current+5) < totalPage}"><span>...</span></li>
            <li th:if="${(page.current+4) < totalPage}"><a th:href="@{'./'+${totalPage}}" th:title="|第${totalPage}页|" th:text="${totalPage}"></a></li>
            <li th:if="${page.hasNext()}" class="next"><a th:href="@{'./'+${page.current + 1}}" title="下一页">»</a></li>
        </ul>
    </div>
    <!-- 分页结束 -->
</div>
</body>
</html>